<template>
	<el-form ref="dirFormRef" :rules="dirFormRule" :model="dirForm" label-width="110px">
		<el-form-item label="名称" prop="storageDirName">
			<el-input v-model="dirForm.storageDirName" placeholder="请输入存储目录名称"></el-input>
		</el-form-item>
		<el-form-item label="文件系统名称" prop="fsName">
			<el-input v-model="dirForm.fsName" placeholder="请输入文件系统名称" disabled></el-input>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useFileStorageApi } from '/@/api/file-storage';

export interface DirFormForm{
	storageDirName: string,
	fsName: string | null
}

defineProps({
	value: {
		type: Boolean
	}
});

const fileStorageApi = useFileStorageApi();
const dirFormRef = ref<FormInstance>();
const dirFormRule = reactive<FormRules>({
	storageDirName: [{ required: true, message: '请输入存储目录名称', trigger: 'blur' }],
	fsName: [{ required: true, message: '请输入文件系统名称', trigger: 'blur' }]
});
const dirForm = reactive<DirFormForm>({
	storageDirName: '',
	fsName: null,
});

fileStorageApi.getFileSystemList().then((res:any) => {
	dirForm.fsName = res.data[0].fsName;
});

const emits = defineEmits(['update:value']);
const createDir = () => {
	if (!dirFormRef.value) return;
	dirFormRef.value?.validate((valid) => {
		if (valid) {
			fileStorageApi.addStorageDir(dirForm).then(() => {
				ElMessage.success('添加【创建存储目录】任务成功');
				// close dialog
				emits('update:value', false);
			});
		}
	});
};

defineExpose({
	createDir
});
</script>